﻿@model Zatify.WebUI.Models.NewPromotionStep2ViewModel
@{
    ViewBag.Title = "New Promotion";
    ViewBag.ContentTitle = "New Promotion";
    Layout = "~/Views/Shared/_ContentLayout.cshtml";
}
@section Styles
{
    <style type="text/css">
        .inner_container
        {
            float: none;
        }
    </style>
}
@section Scripts
{
    <script type="text/javascript">

        var tempFlatFee = parseFloat(@Model.PromotionCompaignFlatFee);
        var tempCost = parseFloat(@Model.PromotionCompaignCost);

        $(document).ready(function () {

            $("#IsRegisteredOutside").change(function () {

                if ($(this).attr("checked"))
                {
                    $("#RadiusCodes").removeAttr("disabled");

                    var dataArray = $("#RadiusCodes option:first").val().split(';');
                    $("#RadiusCode").val(dataArray[0]);
                }
                else
                {
                    $("#RadiusCodes").attr("disabled", "disabled");
                    $("#RadiusCode").val("");
                }
            });
        });

        function proximityRadiusChanged(data, arg) {

            var dataArray = data.split(';');

            var id = dataArray[0];
            var flatFee = parseFloat(dataArray[1]);
            var cost = parseFloat(dataArray[2]);
            
            var hidPromotionCompaignFlatFee =  $("#PromotionCompaignFlatFee");
            var hidPromotionCompaignCost =  $("#PromotionCompaignCost");

            hidPromotionCompaignFlatFee.val((@Model.PromotionCompaignFlatFee + flatFee).toFixed(2));
            hidPromotionCompaignCost.val((@Model.PromotionCompaignCost + cost).toFixed(2));

            tempFlatFee = parseFloat(hidPromotionCompaignFlatFee.val());
            tempCost = parseFloat(hidPromotionCompaignCost.val());

            $("#compaignFlatFee").text(hidPromotionCompaignFlatFee.val());
            $("#compaignCost").text(hidPromotionCompaignCost.val());

            // '-1' if feets selected
            if (arg == -1) {

                $("#feetsCost").text(" +$" + flatFee.toFixed(2) + "/flat $" + cost.toFixed(2) + "/push");
                $("#IsFeetsSelected").val("true");
                $("#IsCustomRangeSelected").val("false");
                $("#IsOver200MilesSelected").val("false");

                $("#CustomRangeValue").attr("disabled", "disabled");
                $("#FeetId").removeAttr("disabled");
            }
            // '-2' if custom range selected
            else if (arg == -2) {
                $("#IsFeetsSelected").val("false");
                $("#IsCustomRangeSelected").val("true");
                $("#IsOver200MilesSelected").val("false");

                $("#FeetId").attr("disabled", "disabled");
                $("#CustomRangeValue").removeAttr("disabled");               
                $("#FeetId").val($("#FeetId option:first").val());
            }
            // '-3' if over 200 miles selected
            else if (arg == -3) {
                $("#IsFeetsSelected").val("false");
                $("#IsCustomRangeSelected").val("false");
                $("#IsOver200MilesSelected").val("true");

                $("#FeetId").attr("disabled", "disabled");
                $("#CustomRangeValue").attr("disabled", "disabled");
                $("#FeetId").val($("#FeetId option:first").val());
            }
            else {
                $("#IsFeetsSelected").val("false");
                $("#IsCustomRangeSelected").val("false");
                $("#IsOver200MilesSelected").val("false");

                $("#FeetId").attr("disabled", "disabled");
                $("#CustomRangeValue").attr("disabled", "disabled");
                $("#FeetId").val($("#FeetId option:first").val());
            }

            if($("#IsRegisteredOutside").attr("checked") == "checked")
            {
                onRadiusCodeChange($("#RadiusCodes").val());
            }

            $("#CustomRangeValue").val("");
            $("#SelectedProximityRadiusId").val(id);
        }

         function onRadiusCodeChange(val) {
         
            if($("#IsRegisteredOutside").attr("checked") == "checked")
            {
                var dataArray = val.split(';');
                var code = dataArray[0];
                var flatFee = parseFloat(dataArray[1]);
                var cost = parseFloat(dataArray[2]);

                $("#registeredOutsideCost").text(" +$" + flatFee.toFixed(2) + "/flat $" + cost.toFixed(2) + "/push");

                $("#RadiusCode").val(code);

                $("#PromotionCompaignFlatFee").val((tempFlatFee + flatFee).toFixed(2));
                $("#PromotionCompaignCost").val((tempCost + cost).toFixed(2));

                $("#compaignFlatFee").text($("#PromotionCompaignFlatFee").val());
                $("#compaignCost").text($("#PromotionCompaignCost").val());
            }
            else
            {
                $("#registeredOutsideCost").text("");

                $("#PromotionCompaignFlatFee").val((tempFlatFee).toFixed(2));
                $("#PromotionCompaignCost").val((tempCost).toFixed(2));

                $("#compaignFlatFee").text($("#PromotionCompaignFlatFee").val());
                $("#compaignCost").text($("#PromotionCompaignCost").val());
            } 
         }

         function onRadiusCodeIsChecked()
         {
             var dataArray = $("#RadiusCodes").val().split(';');
             var flatFee = parseFloat(dataArray[1]);
             var cost = parseFloat(dataArray[2]);

             var hidPromotionCompaignFlatFee = $("#PromotionCompaignFlatFee");
             var hidPromotionCompaignCost = $("#PromotionCompaignCost");

             if($("#IsRegisteredOutside").attr("checked") == "checked")
             {
                hidPromotionCompaignFlatFee.val((parseFloat(hidPromotionCompaignFlatFee.val()) + flatFee).toFixed(2));
                hidPromotionCompaignCost.val((parseFloat(hidPromotionCompaignCost.val()) + cost).toFixed(2));

                $("#compaignFlatFee").text(hidPromotionCompaignFlatFee.val());
                $("#compaignCost").text(hidPromotionCompaignCost.val());
             }
             else
             {
                hidPromotionCompaignFlatFee.val((parseFloat(hidPromotionCompaignFlatFee.val()) - flatFee).toFixed(2));
                hidPromotionCompaignCost.val((parseFloat(hidPromotionCompaignCost.val()) - cost).toFixed(2));

                $("#compaignFlatFee").text(hidPromotionCompaignFlatFee.val());
                $("#compaignCost").text(hidPromotionCompaignCost.val());

                $("#RadiusCodes")[0].selectedIndex = 0;
             }

             $("#registeredOutsideCost").text(" +$" + flatFee.toFixed(2) + "/flat $" + cost.toFixed(2) + "/push");
         }

    </script>
}
<div class="business_interface_area">
    @using (Html.BeginForm())
    {
        @Html.Hidden("PromotionCompaignFlatFee", @Model.PromotionCompaignFlatFee)
        @Html.Hidden("PromotionCompaignCost", @Model.PromotionCompaignCost)
        @Html.Hidden("RadiusCode")
        @Html.HiddenFor(m => m.PromotionId)
        @Html.Hidden("SelectedProximityRadiusId")
        @Html.Hidden("IsFeetsSelected")
        @Html.Hidden("IsCustomRangeSelected")
        @Html.Hidden("IsOver200MilesSelected")
        <div class="business_profile_categories">
            <div class="campaign_category_selection">
                Choose Campaign Proximity Radius</div>
            @foreach (var proximity in Model.ProximityRadiusesMiles)
            {
                if (proximity.ToRadius != 200)
                {
                    if (!proximity.IsCustomRate)
                    {
                        if (proximity.FromRadius == 200)
                        {
                <div class="promotion_proximity_radius_line">
                    <label>
                        <input type="radio" value="" name="proximityRadius" class="categories_radio" onclick="proximityRadiusChanged(@proximity.ProximityRadiusId + ';' + @proximity.FixedCost.ToString("0.00") + ';' + @proximity.RatePerPush.ToString("0.00"), -3)" />
                        (Over 200 miles)
                    </label>
                    <span>+$@proximity.FixedCost.ToString("0.00")/flat $@proximity.RatePerPush.ToString("0.00")/push</span>
                </div>
                        }
                        else
                        {
                <div class="promotion_proximity_radius_line">
                    <label>
                        <input type="radio" value="" name="proximityRadius" class="categories_radio" onclick="proximityRadiusChanged(@proximity.ProximityRadiusId + ';' + @proximity.FixedCost.ToString("0.00")+ ';' + @proximity.RatePerPush.ToString("0.00"))" />
                        @*@(proximity.ProximityRadiusId == 1 ? "checked='checked'" : String.Empty) />*@
                        @proximity.ToRadius @proximity.RadiusUnits
                    </label>
                    <span>+$@proximity.FixedCost.ToString("0.00")/flat $@proximity.RatePerPush.ToString("0.00")/push</span>
                </div>
                        }
                    }
                    else
                    {
                        
                <div class="promotion_proximity_radius_line">
                    <label>
                        <input id="rbtnProximityRadiusFeets" type="radio" style="margin-top: 5px;" name="proximityRadius"
                            class="categories_radio" onclick="proximityRadiusChanged($('#FeetId option:first').val(), -1)" />
                    </label>
                    @Html.DropDownList("FeetId", (List<SelectListItem>)ViewData["ProximityFeets"], new { @class = "selectbox_proxi_radius", onclick = "proximityRadiusChanged($(this).val(), -1)", disabled = "disabled" })
                    <span id="feetsCost">+$@proximity.FixedCost.ToString("0.00")/flat $@proximity.RatePerPush.ToString("0.00")/push</span>
                </div> 
                
                    }
                }

                if (proximity.ProximityRadiusId == 12)
                {
                <div class="promotion_proximity_radius_line">
                    <label>
                        <input type="radio" style="margin-top: 5px;" name="proximityRadius" class="categories_radio" onclick="proximityRadiusChanged(@proximity.ProximityRadiusId + ';' + @proximity.FixedCost.ToString("0.00") + ';' + @proximity.RatePerPush.ToString("0.00"), -2)" />
                        Custom Range (1-199 miles)
                    </label>
                    @Html.TextBoxFor(m => m.CustomRangeValue, new { @class = "selectbox_proxi_radius", placeholder = "Enter Proximity Radius", disabled = "disabled" })
                    <span>+$@proximity.FixedCost.ToString("0.00")/flat $@proximity.RatePerPush.ToString("0.00")/push</span>
                </div>  
                }
            }
            <div class="promotion_proximity_radius_line">
                <label>
                    @Html.CheckBoxFor(m => m.IsRegisteredOutside, new { @class = "categories_radio", style = "margin-top: 5px;", onclick = "onRadiusCodeIsChecked()" })
                    @Html.LabelFor(m => m.IsRegisteredOutside, "Registered Outside of")
                </label>
                @Html.DropDownList("RadiusCodes", (List<SelectListItem>)ViewData["OutsideRadiuses"], new { @class = "selectbox_proxi_radius", disabled = "disabled", onchange = "onRadiusCodeChange($(this).val())" })
                <span id="registeredOutsideCost"></span>
            </div>
            <p class="campaign_cost_rate">
                Campaign Cost: $<span id="compaignFlatFee">@Model.PromotionCompaignFlatFee.ToString("0.00")</span>/flat
                and $<span id="compaignCost">@Model.PromotionCompaignCost.ToString("0.00")</span>/push</p>
            <input type="submit" value="Next" class="blue_btn" style="margin-left: 0px;" />
            @Html.ValidationSummary()
        </div>
    }
    <div class="clearfix">
    </div>
</div>
